<template>
	<view class="page first-page">
		<view class="page-title">房贷计算</view>
		<view class="content">
			<view class="form-item">
				<label class="item-label">贷款方式</label>
				<view class="item-content">
					<view class="text-center line-height-align">
						<radio-group name="radio" @change="loansChange">
							<label>
								<radio value="commercialLoan" :checked="loanType==='commercialLoan'" /><text>商贷</text>
							</label>
							<label class="padding-left-20">
								<radio value="fundLoan" :checked="loanType==='fundLoan'" /><text>公积金贷</text>
							</label>
							<!-- <label class="padding-left-20">
								<radio value="combination" :checked="loanType==='combination'" /><text>组合贷</text>
							</label> -->
						</radio-group>
					</view>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">贷款总额</label>
				<view class="item-content">
					<input class="uni-input" name="input" v-model="totalLoans" /><span class="item-unit">元</span>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">贷款年限</label>
				<view class="item-content">
					<!-- <input class="uni-input" name="input" v-model="years" /><span class="item-unit">年</span> -->
					<picker @change="yearsChange" :value="yearsIndex" :range="yearsArray">
					    <view class="uni-input">{{yearsArray[yearsIndex]}}</view>
					</picker>
					<span class="item-unit">年</span>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">贷款利率</label>
				<view class="item-content">
					<!-- <input class="uni-input" name="input" v-model="loansRate" /><span class="item-unit">%</span> -->
					<picker @change="rateChange" :value="rateIndex" :range="rateArray">
					    <view class="uni-input">{{rateValue[rateIndex]}}</view>
					</picker>
					<span class="item-unit">%</span>
				</view>
			</view>
			<view class="form-item">
				<label class="item-label">还款方式</label>
				<view class="item-content">
					<view class="text-center line-height-align">
						<radio-group name="radio" @change="calTypeChange">
							<label>
								<radio value="repay1" :checked="repayType==='repay1'" /><text>等额本息</text>
							</label>
							<label class="padding-left-20">
								<radio value="repay2" :checked="repayType==='repay2'" /><text>等额本金</text>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="button-sp-area margin-top-20">
		    <button class="mini-btn" type="primary" @click="submitCalc">开始计算</button>
			<button class="mini-btn margin-top-20" type="primary" plain="true" @click="reset">重置</button>
		</view>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			loanType: 'commercialLoan',
			totalLoans: '',
			loansYears: 30,
			//商贷的默认值
			loansRate: 4.9,
			repayType: 'repay1',//贷款方式：'repay1'-等额本息  'repay2'-等额本金
			yearsArray: [1,2,3,4,5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
			yearsIndex: 29,
			rateArray: ['7折(3.43%)','75折(3.675%)','8折(3.92%)','85折(4.165%)','9折(4.41%)','95折(4.655%)','基准利率(4.9%)','1.1倍(5.39%)','1.15倍(5.635%)','1.2倍(5.88%)','1.1倍(6.125%)','1.3倍(6.37%)'],
			rateValue: [3.43, 3.675, 3.92, 4.165, 4.41, 4.655, 4.9, 5.39, 5.635, 5.88, 6.125, 6.37],
			rateIndex: 6,
		};
	},
	
	methods: {
		//贷款方式
		loansChange(e){
			this.loanType = e.detail.value
			if(this.loanType === 'commercialLoan'){
				this.rateArray = ['7折(3.43%)','75折(3.675%)','8折(3.92%)','85折(4.165%)','9折(4.41%)','95折(4.655%)','基准利率(4.9%)','1.1倍(5.39%)','1.15倍(5.635%)','1.2倍(5.88%)','1.1倍(6.125%)','1.3倍(6.37%)']
				this.rateValue = [3.43, 3.675, 3.92, 4.165, 4.41, 4.655, 4.9, 5.39, 5.635, 5.88, 6.125, 6.37]
				this.rateIndex = 6
				this.loansRate = 4.9
			}else if(this.loanType === 'fundLoan'){
				this.rateArray = ['基准利率(3.25%)','1.1倍(3.575%)','1.2倍(3.9%)']
				this.rateValue = [3.25, 3.575, 3.9]
				this.rateIndex = 0
				this.loansRate = 3.25
			}else{
				
			}
			
		},
		//还款方式
		calTypeChange(e){
			this.repayType = e.detail.value
		},
		//贷款年限
		yearsChange(e) {
			this.yearsIndex = e.target.value
			this.loansYears = this.yearsArray[this.yearsIndex]
		},
		//贷款利率
		rateChange(e){
			this.rateIndex = e.target.value
			this.loansRate = this.rateValue[this.rateIndex]
		},
		reset(){
			this.loanType = 'commercialLoan',
			this.totalLoans = ''
			this.loansYears = 30
			this.loansRate = 4.9
			this.repayType = 'repay1',
			this.yearsIndex = 29,
			this.rateArray = ['7折(3.43%)','75折(3.675%)','8折(3.92%)','85折(4.165%)','9折(4.41%)','95折(4.655%)','基准利率(4.9%)','1.1倍(5.39%)','1.15倍(5.635%)','1.2倍(5.88%)','1.1倍(6.125%)','1.3倍(6.37%)']
			this.rateValue = [3.43, 3.675, 3.92, 4.165, 4.41, 4.655, 4.9, 5.39, 5.635, 5.88, 6.125, 6.37]
			this.rateIndex = 6
		},
		submitCalc(){
			//贷款总额，精确到1元
			let totalLoans = this.totalLoans
			//借款年份转换为借款月份
			let totalMonths = this.loansYears * 12
			//百分比的年利率转换为小数的月利率
			let rateMonthly = this.loansRate / 100 / 12
			//等额本息计算公式：每月月供=〔贷款本金×月利率×（1＋月利率）＾还款月数〕÷〔（1＋月利率）＾还款月数－1〕
			//计算月度赔付数据
			let x = Math.pow( 1+ rateMonthly, totalMonths * 1)
			let newResult = parseInt(totalLoans * x * rateMonthly / (x - 1))
			let totalPayMount = parseInt(newResult * totalMonths)
			let totalInterest = parseInt(newResult * totalMonths - totalLoans)
			
			console.log('贷款金额：', totalLoans)
			console.log('月供：', newResult)
			console.log('总还款金额：', totalPayMount)
			console.log('总利息：', totalInterest)
			//包含两位小数的正数校验
			let numberReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
			if(!totalLoans){
				uni.showToast({
					icon:'none',
					title:'请输入贷款金额！'
				})
				return
			}
			if(!numberReg.test(totalLoans)){
				uni.showToast({
					icon:'none',
					title:'贷款金额为大于0的数字且最多两位小数！'
				})
				return
			}
			//等额本金计算公式：每月月供=贷款本金/总月数+ 贷款余额*月利率;(贷款余额，首月就是贷款本金，以后每月=上月贷款余额-贷款本金/总月数)
			//每月本金=本金总额/还款月数  
  				//每月利息=（总的本金-累计还款总额）*月利率
			let loansRemain = totalLoans
			let payList = []
			for (let i = 1; i < (totalMonths + 1); i++) {
				//计算贷款余额
				loansRemain = loansRemain - totalLoans/totalMonths
				//计算月供
				let monthlyPay = totalLoans/totalMonths + loansRemain * rateMonthly
				//计算每月本金
				let principalMonthly = totalLoans/totalMonths
				//计算每月利息
				let principalAndinterest = (totalLoans - principalMonthly * i) * rateMonthly
				//console.log('月供：', monthlyPay.toFixed(2), '本金：', principalMonthly.toFixed(2), '利息：', principalAndinterest.toFixed(2))
				payList.push({
					monthlyPay: monthlyPay.toFixed(2),
					principalMonthly: principalMonthly.toFixed(2),
					principalAndinterest: principalAndinterest.toFixed(2)
				})
			}
			console.log(payList)
			
			uni.navigateTo({
				url:'./detail',
			})
			let data = {
				totalLoans,
				newResult,
				totalPayMount,
				totalInterest,
				repayType: this.repayType,
				payList,
			}
			getApp().globalData.houseLoanResult = data
		},
	}
};
</script>

<style lang="scss">
	
</style>
